<script lang="ts" setup>
interface Props {
  soundHistoryList: any
}
const props = defineProps<Props>()
</script>

<template>
  <div v-for="item in props.soundHistoryList" class="audioList">
    <div class="audioTxt">
      {{ item.messages }}
    </div>
    <audio class="audio" ref="audio" controls :src="item.url" />
  </div>
</template>

<style lang="scss" scoped>
.audioList {
  margin-bottom: 20px;
}

.audioTxt {
  width: 100%;
  background: #f9f9f9;
  border-radius: 20px 20px 20px 5px;
  padding: 10px 20px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
}

.audio {
  width: 100%;
}
</style>
